<template>
  <PageWrapper>
    <a-card :bordered="false">
      <BasicTable
          :loading="loading"
          :dataSource="dataSource"
          @register="registerTable"
          @expand="onExpand"/>
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { defHttp } from '/@/utils/http/axios'
import { PageWrapper } from '/@/components/Page'
import { BasicTable, useTable } from '/@/components/Table'

const url = '/mock/api/asynTreeList'

const loading = ref<boolean>(false)
const dataSource = ref<any[]>([])
const [registerTable, { setLoading }] = useTable({
  rowKey: 'id',
  bordered: true,
  canResize: false,
  // 树表格
  isTreeTable: true,
  showIndexColumn: true,
  columns: [
    { title: '名称', dataIndex: 'name' },
    { title: '组件', dataIndex: 'component' },
    { title: '排序', dataIndex: 'orderNum' },
  ],
})

async function loadData(params) {
  loading.value = true
  let result = await defHttp.get({ url, params })
  loading.value = false
  return result.map(item => {
    if (item.hasChildren) {
      return { ...item, children: [] }
    } else {
      return item
    }
  })
}

async function loadRootData() {
  dataSource.value = await loadData({ id: '0' })
}

loadRootData()

async function onExpand(isExpand, rowData) {
  if (isExpand && rowData.hasChildren && rowData.children.length === 0) {
    rowData.children = await loadData({ id: rowData.id })
  }
}
</script>